<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>

	<body>
		<svg>
			<rect width="200" height="100" style="fill: rgb(0, 0, 255); stroke-width: 1; stroke: rgb(0, 0, 0)" />
		</svg>

		<svg>
			<!-- x 属性定义矩形的左侧位置  y 属性定义矩形的顶端位置 -->
			<rect x="50" y="20" width="200" height="100" style="fill: blue; stroke: pink; stroke-width: 5; fill-opacity: 0.1; stroke-opacity: 0.9" />
		</svg>

		<svg>
			<rect width="200" height="100" style="fill: blue; stroke: pink; stroke-width: 5; opacity: 0.5" />
		</svg>

		<svg>
			<!-- rx 和 ry 属性可使矩形产生圆角。 -->
			<rect rx="20" ry="20" width="200" height="100" style="fill: red; stroke: black; stroke-width: 5; opacity: 0.5" />
		</svg>

		<style>
			svg {
				/* 默认 宽300 高150 */
				border: 1px solid red;
			}
		</style>
	</body>
</html>
